<template>
  <div>
<!-- 搜索历史 -->
<van-cell title="搜索历史">
  <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
  <template>
  <van-icon @click="isDelete=true" v-if="!isDelete" name="search"/>
  <div>
  <span @click="history.splice(0)">全部删除</span>
  <span @click="isDelete=false" style="magin-left:7px">
    完成</span>
  </div>
  </template>
</van-cell>

<!-- 搜索列表 -->
<van-cell :title="item" v-for="item in history" :key="item" @click="onClickHistory(item)">
  <!-- <van-cell title="单元格" value="内容" /> -->
  <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
  <template v-if="isDelete">
<van-icon name="close"/>
  </template>
</van-cell>
<!-- <van-cell title="黑马"> -->
  <!-- <van-cell title="单元格" value="内容" /> -->
  <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
  <!-- <template>
<van-icon name="close"/>
  </template> -->
<!-- </van-cell><van-cell title="黑马"> -->
  <!-- <van-cell title="单元格" value="内容" /> -->
  <!-- <van-cell title="单元格" value="内容" label="描述信息" /> -->
  <!-- <template>
<van-icon name="close"/>
  </template> -->
<!-- </van-cell> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      isDelete: false// 不删除
    }
  },
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  created () {

  },

  methods: { // 需要子传父
    //  点击搜索历史
    onclickHistory (value) {
      if (this.isDelete) {
        // 处于删除状态
        const index = this.indexOf(value)// 获取返回符合条件的那一条索引
        this.history.splice(index, 1)
      } else {
        // 返回搜索
        this.$emit('onSearch', value)
      }
    }
  }
}
</script>

<style scoped lang='less'>

</style>
